<template>
    <t-content class="t-content">
<div class="homework-stastics">
    <div class="homework-stastics-header">
    <h1>Homework</h1>
    
</div>
    <div class="homework-stastics-body">
        <div class="grey-box">1</div>
        <div class="grey-box">1</div>
        <div class="grey-box">1</div>

    </div>
</div>
<div class="chart-stastics">
    <div class="chart">
        <div class="chart-header">
        <h1> The number of questions done in recent days</h1>
    </div>
    <div class="chart-body">
    <canvas ref="lineChart" width="400" height="400"></canvas>
  </div>
    </div>
    
    <div class="chart">
        <div class="chart-header">
        <h1> Percentage OF correctness</h1>
    </div>
    
        <div class="chart-body">
    <canvas ref="pieChart" width="400" height="400"></canvas>
    </div>
    </div>
</div>
    </t-content>
</template>
<script>
import Chart from 'chart.js/auto';

export default {
  mounted() {
    this.renderBarChart();
    this.renderPieChart();
  },
  methods: {
    renderBarChart() {
      const ctx = this.$refs.lineChart.getContext('2d');
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [{
            label: 'My First Dataset',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: 'rgb(75, 192, 192)',
            tension: 0.1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    },
    renderPieChart() {
      const ctx = this.$refs.pieChart.getContext('2d');
      new Chart(ctx, {
        type: 'pie',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: 'My First Dataset',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              'rgb(255, 99, 132)',
              'rgb(54, 162, 235)',
              'rgb(255, 205, 86)',
              'rgb(75, 192, 192)',
              'rgb(153, 102, 255)',
              'rgb(255, 159, 64)'
            ]
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false
        }
      });
    }
  }
  }
</script>
<style scoped>
.t-content{
  display: flex;
  flex-direction: row;
  background-color:rgb(252,249,244);
  justify-content: space-around;
  align-items: center;
  height: auto;
}
.homework-stastics{
    display:flex;
    flex-direction: column;
    border: 2px solid #69c3dd;
    background-color:#dfeeef;
    height:80%;
    width:30%;
    padding:40px;
    margin:40px;
    border: 2px solid #69c3dd;

}
h1{
    text-align: left;

}
.chart-stastics
{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    height:80%;
    width: 60%;
    padding:40px;
    margin:40px;
    border: 2px solid #69c3dd;
    background-color:#dfeeef;
}
.homework-stastics-header
{
    height: 10%;
    width: auto;
    border-bottom-color: red;
    font-weight: bold; /* 设置文字粗细为粗体 */
    text-align: left; /* 设置文字右对齐 */
    border-bottom:2px solid grey;
}
.homework-stastics-body
{
    display:flex;
    width:auto;
    height: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    overflow-y: auto
}
.chart
{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width:40%;
    padding:24px;
    border: 2px solid #69c3dd;
}

.chart-header
{
    height: 20%;
    width:auto;
    margin-bottom:-200px;
    border-bottom:2px solid grey;
}
.chart-body
{   
    height: auto;
    width: auto;

}
.grey-box{
    width:80%;
    height: 30%;
    display:flex;
    background-color:grey;
    border: 2px solid #69c3dd;
}
</style>